<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Diboot 开发助理 专业版</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Diboot轻代码开发平台" name="keywords" />
    <meta content="高质量、高效率、智能化的软件开发平台" name="description" />
    <meta content="苏州帝博信息技术有限公司 - www.dibo.ltd" name="author" />
    <link href="https://devtools.diboot.com/cdn/v1/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/adminlte.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/toastr.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/datepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/pace.min.css" rel="stylesheet" />
    <link rel="shortcut icon" href="https://www.diboot.com/favicon.ico" />
    <style>.toast-top-center {top: 80px !important;right: 0;width: 100% } section.content {padding: 8px;border-radius: 0;border-top-width: 1px;margin-bottom: 10px;} section.content .box {padding: 5px;margin-bottom: 10px;} section.content .box-title {font-size: 14px;} section.content .box-body {padding: 4px 6px;} .col-md-10 .table, .table-responsive .table {margin-bottom: 5px;} section.content .btn-app.primary {background-color: #F0FFFF;} section.content .btn-app.primary:hover {color: #fff;background-color: #008d4c;} .box-header {padding: 8px;} section.content .btn-reset {height: 30px;padding: 5px;font-size: 12px;} label.col-md-1 {padding: 0 5px;} .form-control {padding: 4px;} label {font-weight: 500;} select.custom {width: 80px;height: 34px;border: 1px solid #E1E1E1;} select.form-control {border-color: #E1E1E1;} input[type="checkbox"] {width: 15px;height: 15px;} .checkbox {margin-top: 2px;margin-bottom: 6px;} input.form-input {margin-top: 9px;padding-left: 4px;padding-right: 4px;} td div.row {margin-left: 0;margin-right: 0;padding: 4px 2px;border-bottom: 1px dashed #e0e0e0;} .table-striped > tbody > tr:nth-of-type(2n) {background-color: #f2feff;} .sub-options label {width: 50px;} .table > tbody > tr > td.valign-center {font-weight: 600;vertical-align: center;} .table > tbody > tr > td label.valign-center {padding-top: 6px;} .table > tbody > tr > td {padding: 2px 6px;} .div-columnBox {position: relative;} .div-columnBody {width: 100%;max-height: 200px;overflow: auto;padding: 4px 8px;position: absolute;z-index: 101;background-color: #d0e5ef;border-radius: 5px;} .div-columnBody-modal{width:100%;max-height: 200px;overflow: auto;padding: 4px 8px;position:absolute;z-index:101;background-color: #f6faec;} .div-column {border-bottom: dashed 1px #333;cursor: pointer;padding: 4px 0;} .div-column:last-child {border-bottom: none;} .div-drag {padding-right: 0;} .div-drag .alert {width: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 4px 5px;margin-right: 5px;cursor: move;margin-bottom: 0;color: #333 !important;border-color: #aad5e0;background-color: #d2f2f6 !important;} @keyframes fadeInRight {from {opacity: 0;transform: translate3d(100%, 0, 0);} to {opacity: 1;transform: none;} } .fadeInRight {animation: fadeInRight .5s;-webkit-animation: fadeInRight .5s;} .border-b {border-bottom: solid 1px #ccc;padding-bottom: 5px;} </style>
</head>
<body class="hold-transition skin-green sidebar-collapse sidebar-mini">
<div class="wrapper">
    <header class="main-header">
        <a href="https://www.diboot.com" target="_blank" class="logo"><span class="logo-mini"><b>D</b>ibo</span><span class="logo-lg"><b>D</b>iboot 开发助理</span></a>
        <nav class="navbar navbar-static-top">
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
        </nav>
    </header>
    <aside class="main-sidebar">
        <section class="sidebar">
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">开发工具</li>
                <li><a href="/demo/maintain/table.html"><i class="fa fa-database"></i> <span>管理 数据库表</span></a></li>
                <li><a href="/demo/maintain/sql.html"><i class="fa fa-bolt"></i> <span>执行 SQL语句</span></a></li>
                <li><a href="/demo/generate/crud.html"><i class="fa fa-cube"></i><span>生成 CRUD功能</span></a></li>
                <li class="active"><a href="/demo/generate/import.html"><i class="fa fa-upload"></i> <span>生成 Excel导入功能</span></a></li>
                <li><a href="/demo/generate/export.html"><i class="fa fa-download"></i><span>生成 导出到Excel功能</span></a></li>
                <li><a href="/demo/generate/report.html"><i class="fa fa-bar-chart"></i> <span>生成 统计图表功能</span></a></li>
            </ul>
        </section>
    </aside>
    <div class="content-wrapper" id="app2">
        <section class="content">
            <div class="box">
                <div class="box-header with-border">
                    <h5 class="box-title" style="font-size:16px"><i class="fa fa-cube"></i> 生成 Excel导入功能 <small>(上方区域配置功能选项, 下方区域预览生成效果)</small></h5>
                    <div class="box-tools pull-right" style="top:2px">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> 收起/展开 </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-10" style="padding-right: 0">
                            <table class="table table-striped">
                                <tbody>
                                <tr>
                                    <td width="90px" class="valign-center"><label class="valign-center"><b>选择实体</b></label></td>
                                    <td>
                                        <div class="row">
                                            <div class="col-md-2">
                                                <select v-model="config.model.table" @change="choiceTable" class="form-control"><option value="">- 功能相关主表 -</option><option v-for="entity in entityList" :value="entity.tableName">{{entity | formatTableOptions}} </option></select>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="text" v-model="config.model.label" class="form-control" placeholder="实体名称(名词)" />
                                            </div>
                                        </div></td>
                                </tr>
                                <tr>
                                    <td><label class="valign-center"><b>导入字段</b></label></td>
                                    <td>
                                        <div class="row" v-for="(reference, index) in excelColumnList">
                                            <div class="col-md-1" :title="'Excel中第'+reference.colIndex+'列'">
                                                <input class="form-control" type="number" min="1" v-model="reference['colIndex']" />
                                            </div>
                                            <div class="col-md-2">
                                                <select v-model="reference['fieldName']" class="form-control" @change="choiceField(index)"><option value="">- 哪个字段 -</option><option v-for="col in enableTableColumns" :value="col.fieldName">{{col.fieldName}} </option></select>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="text" class="form-control" placeholder="字段名称" @blur="checkNotNull(index)" v-model="reference['fieldLabel']" />
                                            </div>
                                            <div class="col-md-2">
                                                <select v-model="reference['fieldPackagingType']" class="form-control"><option value="">- 字段类型 -</option><option v-for="dataType in fieldType" :value="dataType">{{ dataType }}</option></select>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="input-group">
                                                    <input type="text" class="form-control" placeholder="字段验证规则" v-model="reference['validation']" />
                                                    <span class="input-group-addon" @click="showValidation(index)" style="padding:4px 8px;cursor: pointer" title="添加字段验证规则"><i class="fa fa-plus"></i></span>
                                                </div>
                                                <div v-show="reference['showCheckbox']" style="position: absolute; top: 35px; right: 15px; width: 240px;padding:5px 10px; z-index: 100; border:solid 1px #e8e8e8;background-color: rgb(233,251,248)">
                                                    <ul style="list-style: none;padding:0 10px">
                                                        <li v-for="valid in validationList" style="padding:2px"><label><input type="checkbox" name="Validation" v-model="reference['validation']" :value="valid.val" />{{ valid.label}} </label></li>
                                                    </ul>
                                                    <button type="button" @click="confirmCheck(index)" class="btn btn-success btn-sm pull-right" style="padding: 1px 10px">确定 </button>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <button v-if="excelColumnList.length &gt; 1" type="button" class="btn btn-default" @click="removeReference(index)" title="移除关联"><i class="fa fa-trash-o"></i></button>
                                                <button v-if="index==(excelColumnList.length-1)" type="button" @click="addReference" class="btn btn-info" title="添加Excel导入字段"><i class="fa fa-plus"></i></button>
                                            </div>
                                        </div></td>
                                </tr>
                                <tr>
                                    <td><label class="valign-center"><b>配置菜单</b></label></td>
                                    <td>
                                        <div class="row">
                                            <div class="col-md-2">
                                                <select name="menuParentId" class="form-control" v-model="depositMenu['parentId']"><option value="0">- 上级菜单 -</option><option v-for="menu in menus" :value="menu.id">{{ menu.name }} </option></select>
                                            </div>
                                            <label class="valign-center col-md-1" style="margin-left: -15px"><button type="button" title="新建上级菜单" data-toggle="modal" data-target="#menuModal" class="btn btn-sm btn-default" style="padding:2px 6px"><i class="fa fa-plus"></i></button></label>
                                            <label class="col-md-1" style="padding-top: 7px">菜单名称 </label>
                                            <div class="col-md-3">
                                                <input type="text" v-model="depositMenu['name']" class="form-control" placeholder="菜单名称" />
                                            </div>
                                        </div></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-2">
                            <a class="btn btn-app btn-reset" href="/generate/import">重置</a>
                            <br />
                            <br />
                            <button class="btn btn-app primary" @click="submit"><i class="fa fa-arrow-circle-right"></i> 生成 </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box box-primary">
                <div class="box-header with-border">
                    <i class="fa fa-list"></i>
                    <h3 class="box-title">{{config.model.label}}数据上传</h3>
                    <div class="box-tools pull-right">
                        <a class="btn font-white" href="javascript:;"><i class="fa fa-download"></i> 下载示例文件 </a>
                    </div>
                </div>
                <div class="box-body">
                    <form class="form-horizontal" action="" method="post">
                        <div class="form-group">
                            <div class="col-md-4 col-md-offset-2">
                                <input type="file" id="attachedFiles" name="attachedFiles" style="margin-top:5px" data-fv="NotNull" />
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="comment" class="form-control" placeholder="备注信息" value="" />
                            </div>
                        </div>
                        <hr />
                        <div class="form-group">
                            <div class="col-md-2 col-md-offset-4">
                                <button class="btn btn-primary btn-block btn-action" data-action="preview" type="button"><i class="fa fa-find"></i> 预览数据 </button>
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-success btn-block btn-action" data-action="upload" type="button"><i class="fa fa-upload"></i> 上传数据 </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="box box-primary">
                <div class="box-header with-border">
                    <i class="fa fa-list"></i>
                    <h3 class="box-title">{{config.model.label}}数据上传记录 </h3>
                </div>
                <div class="box-body">
                    <form method="get" action="#">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                <tr>
                                    <th>文件名</th>
                                    <th>大小</th>
                                    <th>数据量</th>
                                    <th>备注</th>
                                    <th>状态</th>
                                    <th>上传时间</th>
                                    <th class="col-operation">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><input type="text" class="form-control search-field " name="name" value="" /></td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td><input type="text" class="form-control search-field " name="status" value="" /></td>
                                    <td><input type="text" class="form-control search-field datepicker" name="createTime" value="" /></td>
                                    <td><button type="button" class="btn btn-info btn-sm loading-animation">查询</button><a href="#" class="btn btn-default btn-sm loading-animation" title="重置"><i class="fa fa-refresh"></i></a></td>
                                </tr>
                                <tr>
                                    <td><a href="#">示例文件</a></td>
                                    <td>2048 KB</td>
                                    <td>5</td>
                                    <td>测试示例</td>
                                    <td>成功</td>
                                    <td>2017-11-11</td>
                                    <td><a href="#" class="btn btn-default btn-xs" title="查看"><i class="fa fa-eye"></i></a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="box-footer clearfix">
                            <nav>
                                <div class="pagination pull-left">
                                    <p style="font-size: 14px; height: 34px; line-height: 34px;">【当前显示 <span style="color: rgb(51, 122, 183);">1</span>- <span style="color: rgb(51, 122, 183);">10</span>条 / 共 <span style="color: rgb(51, 122, 183);">1</span> 条记录】</p>
                                </div>
                                <ul class="pagination pull-right">
                                    <li><a href="#" title="首页"><span aria-hidden="true"> &lt;&lt; </span></a></li>
                                    <li><a href="#" title="上一页"><span aria-hidden="true"> &lt; </span></a></li>
                                    <li class="active"><a href="#" title="第1页"><span aria-hidden="true"> 1 </span></a></li>
                                    <li><a href="#" title="下一页"><span aria-hidden="true"> &gt; </span></a></li>
                                    <li><a href="#" title="末页"><span aria-hidden="true"> &gt;&gt; </span></a></li>
                                </ul>
                            </nav>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal fade in" id="menuModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">新建上级菜单</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">菜单名称 <span style="color: #f00">*</span></label>
                                    <div class="col-md-8">
                                        <input class="form-control" v-model="newMenu.name" placeholder="菜单名称" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">菜单图标 <span style="color: #f00">*</span></label>
                                    <div class="col-md-8">
                                        <div class="div-columnBox text-center" @mouseover="isShowMenuIcon = true" @mouseleave="isShowMenuIcon = false">
                                            <input type="text" readonly="" placeholder="菜单图标 (fa fa-icon)" class="form-control" v-model="newMenu.icon" />
                                            <div class="div-columnBody-modal" v-if="isShowMenuIcon">
                                                <div class="col-md-1" v-for="list in webicon">
                                                    <i :class="list" @click="getNewMenuIcon(list)" style="cursor: pointer"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <div class="col-md-10 col-md-offset-1">
                                <button type="button" class="btn btn-default pull-left" data-dismiss="modal"> 取 消</button>
                                <button type="button" class="btn btn-primary" :disabled="!newMenu.name || !newMenu.icon" @click="addNewMenu"> 确认添加</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/jquery.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/bootstrap.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/adminlte.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/toastr.min.js"></script>
<script src="https://devtools.diboot.com/cdn/v1/vue.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/datepicker.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/pace.min.js"></script>
<script>var contextPath = "";</script>
<script type="text/javascript" src="https://devtools.diboot.com/loader/js/1.6.0?f=web/js/templates.generate.import.js&amp;lcs=C4LqfUblTILA6G5cbjQmbaBFRbenzFJtb3FXKP5/gQyUbQzZKRkPKOMv%2BDnRxRYlj5MDY0RddZ%2BmiTrJ5GT%2BaUl7KPk8bgdv%2BDEI5O%2BbfG3A8beHVwQAM75gqKreYmhq"></script>
<script>$(function () {$('.datepicker').datepicker({language: 'zh-CN', format: "yyyy-mm-dd", autoclose: true }) }) </script>
</body>
</html>